<template>
	<view class="box">
		<view class="box-top">
			<img class='arrow' @click='retu()' src='http://127.0.0.1:7001/public/activity/jiantou.png'>
			<span class='activity'>活动详情</span>
			<span class='signup' @click='signUp' v-if="isFalse">{{list.state==0?'报名':'已报名'}}</span>
		</view>

		<view class="Userinformation-box">

			<view class="Userinformation">
				<!-- 用户头像 -->
				<view class="yhtx">
					<img class='headportrait' :src='list.url' />
				</view>
				<!-- 用户信息 -->
				<view class="username">
					<span class='name'>{{list.name}}</span>
					<img class='real' src='http://127.0.0.1:7001/public/activity/shenfen.png' />
					<span class='user-item'>{{list.time}}</span>

					<span class='user-miaoshu'>{{list.interest}}</span>
				</view>
				<!-- 用户爱好 -->
				<view class="hobby">
					<img :src='list.hobbyurl'>
					<span>{{list.hobby}}</span>
				</view>
			</view>
		</view>


		<view class="Userinformation1">
			<span class='user-miaoshu'>{{list.interest}}</span>
			<span class='text-detail'>去东校门星座ktv嗨起来去东校门星座ktv嗨起来去东校门星座ktv嗨起来去东校门星座ktv嗨起来去东校门星座ktv嗨起来去东校门星座ktv嗨起来</span>
		</view>

		<view class="Userinformation2">
			<span class='Toregister'>已报名的同学</span>
			<span class='share'>喊人一起来</span>
			<img class='share-img' @click="fenxx" src='http://127.0.0.1:7001/public/activity/fenxiang.png'>


			<view class="Toregister-box">
				<view class="Toregister-box1" v-for="item in imgItems" :key="item.id">
					<img class='headportrait1' :src='item.url' />
				</view>


				<view class="fenxiang" v-if="fenxiang">
					<u-mask :fenxiang="fenxiang" @click="fenxiang = false"></u-mask>

					<view class="fenxiang-biaoti">
						分享至
					</view>
					<view class="fenxiang-list" @click="fenx">
						<view class="fenxiang-img">
							<img src='http://127.0.0.1:7001/public/activity/wx.png' />
						</view>
						<view class="fenxiang-img-p">
							微信好友
						</view>
					</view>
					<view class="fenxiang-list" @click="fenx">
						<view class="fenxiang-img">
							<img src='http://127.0.0.1:7001/public/activity/pyq.png' />
						</view>
						<view class="fenxiang-img-p">
							微信朋友圈
						</view>
					</view>
					<view class="fenxiang-list" @click="fenx">
						<view class="fenxiang-img">
							<img src='http://127.0.0.1:7001/public/activity/qqhy.png' />
						</view>
						<view class="fenxiang-img-p">
							QQ好友
						</view>
					</view>
					<view class="fenxiang-list" @click="fenx">
						<view class="fenxiang-img">
							<img src='http://127.0.0.1:7001/public/activity/qq空间.png' />
						</view>
						<view class="fenxiang-img-p">
							QQ空间
						</view>

					</view>
				</view>




			</view>
		</view>
		<view class="Userinformation3">
			<view class="Userinformation3-title">
				<img class='pencil' src='http://127.0.0.1:7001/public/activity/qianbi.png' />
				<span>留言</span>
			</view>

			<view class="pencil-box" v-for="item in userword" :key='item.id'>
				<!-- 删除留言 -->
				<u-swipe-action @click='deletetext(item)' :options="options">
					<view @click="reply(item)" class="pencil-box-user" style="display: flex;">
						<view style="justify-content: space-between;"><img :src='item.url' />
							<span class='word-name'>{{item.name}}</span>

						</view>
						<view style="width:43%;"></view>
						<view><span class='word-time'>{{item.time | dateFormat}}</span></view>

					</view>
					<view class="pencil-box-liuyan">
						<span class='interest'>{{item.interest}}</span>
					</view>
				</u-swipe-action>
			</view>

		</view>



		<view class="userinput">
			<view style="width: 600upx;">
				<u-input v-model="value" :type="type" :border="border" />
			</view>
			<u-button style="background-color: #FAAB34; color: white; " @click='sendout()'>发送</u-button>
		</view>
	</view>
</template>

<script>
	import shijianc from '../../../common/time.js'
	export default {
		data() {
			return {
				// show: false,
				value: '',
				fenxiang: false,
				list: [],
				isFalse: true,
				isTrue: false,
				isfenxiang: true,
				userword: [],
				type: 'text',
				border: true,
				imgItems: [],
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'red'
					}
				}]

			}
		},
		onLoad(option) {
			this.$api.searchMsg(option.id).then(res => {
					this.list = res.data
					// console.log(this.list)
				}),
				this.$api.userWord().then(res => {
					this.userword = res.data
					// console.log(this.userword)
					let a = this.userword.time
				})

			this.$api.WhjUser().then(res => {
				this.imgItems = res.data.filter(item => {
					return item.state == 1
				})
				// console.log(this.imgItems)
			})
		},

		methods: {
			retu() {
				uni.switchTab({
					url: '../course'
				})
			},
			// 报名
			signUp() {
				if (this.list.state == 0) {
					this.list.state = 1
					this.$api.createSig(this.list).then(res => {
						this.$api.WhjUser().then(res => {
							this.imgItems = res.data.filter(item => {
								return item.state == 1
							})
						})
					})
				} else {
					this.show = true;
					this.list.state = 0
					this.$api.createSig(this.list).then(res => {
						this.$api.WhjUser().then(res => {
							this.imgItems = res.data.filter(item => {
								return item.state == 1

							})
						})
					})
				}

			},

			// 发布留言
			sendout(data) {
				var a = {
					name: this.list.name,
					url: this.list.url,
					interest: this.value,
				}
				this.$api.createWord(a).then(res => {
					this.$api.userWord().then(res => {
						this.userword = res.data
					})
					this.value = ''
				})
			},
			// 删除留言
			deletetext(item) {
				console.log(this.list.name)
				this.$api.deluserWord(item).then(res => {
					this.$api.userWord().then(res => {
						this.userword = res.data
					})
				})
			},
			// 回复留言
			reply(item) {
				var itemname = item.name
				this.value = `回复@${itemname}:`
			},

			fenx() {
				uni.showToast({
					icon: "success",
					title: '分享成功！'
				})
				this.fenxiang = false
			},
			fenxx() {
				this.fenxiang = true
			},

		}
	}
</script>

<style lang="scss">
	.box {
		width: 100%;
		height: 730px;
		background: #eeebeb;

		.box-top {
			width: 100%;
			height: 10%;
			border-bottom: 1px solid #f7cb88;
			position: relative;
			background: white;

			.arrow {
				width: 3%;
				height: 25%;
				position: absolute;
				top: 38%;
				left: 5%;
			}

			.activity {
				font-size: 35upx;
				text-align: center;
				display: block;
				line-height: 140upx;
			}

			.signup {
				font-size: 35upx;
				position: absolute;
				top: 38%;
				right: 5%;
				color: coral;
			}
		}
	}


	.Userinformation {
		width: 100%;
		height: 210upx;

		display: flex;

		// 用户头像
		.yhtx {
			width: 20%;
			height: 200upx;

			img {
				width: 130upx;
				margin: 36upx 10upx;
			}
		}

		.username {
			width: 60%;
			height: 200upx;
			position: relative;

			.name {
				font-size: 30upx;
				display: block;
				margin-top: 35upx;
				margin-left: 20upx;
			}

			.real {
				width: 44upx;
				height: 34upx;
				margin: 6upx 6upx;
				position: absolute;
				top: 38upx;
				left: 80upx;
			}

			.user-item {
				font-size: 40upx;
				display: block;
				margin-left: 20upx;
			}

			.user-miaoshu {
				display: block;
				margin-left: 20upx;
			}
		}

		.hobby {
			width: 20%;
			height: 200upx;

			img {
				width: 80upx;
				margin: 40upx 40upx;
			}

			span {
				display: block;
				color: #999;
				font-size: 25upx;
				text-align: center;
				margin-top: -20upx;
			}
		}
	}



	.Userinformation1 {
		width: 100%;
		height: 180upx;
		background: white;
		border-bottom: 1px solid #f2f2f2;
		margin-top: 8px;

		.user-miaoshu {
			font-size: 30upx;
			margin-top: -2%;
			margin-left: 3%;
			display: block;
		}

		.text-detail {
			font-size: 28upx;
			margin-left: 3%;
			display: block;
			color: #999999;
		}
	}

	.Userinformation2 {
		width: 100%;
		height: 240upx;
		background: white;
		border-bottom: 1px solid #f2f2f2;
		position: relative;

		.Toregister {
			font-size: 40upx;
			display: block;
			margin-left: 3%;
			line-height: 80upx;
		}

		.share {
			font-size: 22upx;
			display: block;
			color: #999999;
			position: absolute;
			right: 12%;
			top: 10%;
		}

		.share-img {
			width: 40upx;
			height: 40upx;
			position: absolute;
			right: 5%;
			top: 9%;
		}

		.Toregister-box {
			width: 100%;
			height: 80%;
			position: relative;

			.Toregister-img {
				float: left;
				width: 80upx;
				height: 20%;
				margin-top: 1%;
				margin-left: 1%;
			}

			.Toregister-box1 {
				width: 90%;
				margin-left: 2%;
			}
		}
	}

	.headportrait1 {
		width: 70upx;
		float: left;
		margin-left: 7px;
	}

	.Userinformation3 {
		width: 100%;
		background: white;
		margin-top: 2%;
		border-bottom: 1px solid #f2f2f2;

		.Userinformation3-title {
			width: 100%;
			height: 60upx;

			.pencil {
				width: 40upx;
				height: 40upx;
				display: block;
				padding-right: 10upx;
				margin-top: 3upx;
				margin-left: 20upx;
				float: left;
			}

			span {
				font-size: 35upx;
				display: block;

			}
		}


		.pencil-box {
			width: 100%;
			height: 200upx;
			border: 1px solid #f2f2f2;
			margin-top: 3%;

			.pencil-box-user {
				width: 100%;
				height: 50%;

				img {
					width: 80upx;
					margin-top: 20upx;
					margin-left: 20upx;
					float: left;
					padding-right: 20upx;
				}

				.word-name {
					font-size: 30upx;
					font-weight: 550;
					margin-top: 32upx;
					display: block;
					float: left;
				}

			}

			.pencil-box-liuyan {
				width: 90%;
				height: 50%;
				margin: 0 auto;

				span {
					display: block;
					line-height: 100upx;
				}
			}
		}

	}

	.userinput {
		width: 100%;
		height: 140upx;
		display: flex;
		background: white;
	}

	.word-time {
		font-size: 25upx;
		color: #999;
		margin-top: 36upx;
		display: block;
		float: left;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 120px;
		height: 120px;
		background-color: #fff;
	}





	.fenxiang {
		width: 153px;
		height: 186px;
		background-image: url('http://127.0.0.1:7001/public/activity/beijing.png');
		position: absolute;
		right: -7px;
		background-size: 91%;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		z-index: 3;
	}

	.fenxiang .fenxiang-biaoti {
		line-height: 70upx;
	}

	.fenxiang-list {
		width: 90%;
		height: 60upx;
		margin: 6upx auto;
		display: flex;
		border-bottom: 1px solid #cccccc;

	}

	.fenxiang-img {
		width: 40upx;
		height: 38upx;
		/* background-color: royalblue; */
		margin-left: 20upx;
		margin-top: 10upx;

	}

	.fenxiang-img img {
		width: 100%;
		height: 100%;
	}

	.fenxiang-img-p {
		margin-left: 20upx;
		line-height: 54upx;
	}
</style>
